<template>
    <div>
        <ul class="list">
            <li v-for="(item,index) in songlist" :key="index">
                <div>
                    <img :src="item.pic_big" alt="">
                </div>
                <div>
                    <p>{{item.title}}</p>
                    <p class="list-p">{{item.author}}</p>
                </div>
            </li>


        </ul>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "tabList",
        data(){
            return {
                songlist:[]
            }
        },
        props:["type","size"],
        created() {
            axios.get("/ltw/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+this.type+"&size="+this.size+"").then(res=>{
                this.songlist = res.data.song_list;
                console.log(this.songlist)
            })
        }
    }
</script>

<style lang="less" scoped>
    .list {
        li {
            width: 100%;
            height: 60px;
            padding: 10px;

            div:nth-of-type(1) {
                float: left;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
            div:nth-of-type(2) {
                float: left;
                p{
                    font-size: 14px;
                    margin: 0;
                    margin-left: 10px;
                    margin-top: 5px;
                }
                .list-p{
                    color: #999;
                    font-size: 12px;
                }
            }
        }

    }
</style>